<template>
  <div class="container">
    <ul class="all-list"
        v-if="list.length>0">
      <li class="list-item"
          v-for="(val, key) in list"
          :key="key">
        <div class="header">{{val.time_msg}}</div>
        <ul class="projects-list">
          <li class="project-item"
              v-for="(item, index) in val.list"
              :key="index"
              @tap="project_detail (item)">
            <div class="image">
              <img v-if="imgUrl&&item.image"
                   :src="imgUrl+item.image"
                   :lazy-load="true"
                   class="img" />
              <span class="buyingImg"
                    v-html="item.activity_status==1?'即将开抢':'抢购中'"
                    v-if="item.activity_status == 1 || item.activity_status == 2"></span>
            </div>
            <div class="content">
              <h4 class="project-name">
                <!-- <span
                  class="wei"
                  v-if="item.is_repair ==1"
                  :class="item.insurance_is_set==2?'wei1':''"
                >维</span>
                <span class="bao" v-if="item.insurance_is_set==2">保</span>-->
                {{item.name}}
              </h4>
              <div class="hos-info clearfix">
                <div class="hos-name"
                     v-if="item.hospitals_name!==null">{{item.hospitals_name}}</div>
              </div>
              <!-- <p class="user_point" v-if="item.activity_status==4 && item.deduction_credit > 0">
                积分可抵
                <span class="icon">￥</span>
                {{item.deduction_credit}}
              </p>-->
              <div class="price">
                <div class="old-price clearfix">
                  <div class="num"></div>
                </div>
                <div class="bottom clearfix">
                  <div class="left clearfix">
                    <span v-if="item.activity_status==1 || item.activity_status==3"
                          style="font-size:9px">优惠价</span>
                    <span class="num"
                          v-if="item.activity_status!==4">
                      <span class="icon">￥</span>
                      {{item.discounts}}
                    </span>
                    <span class="num"
                          v-if="item.activity_status==4">
                      <span class="icon">￥</span>
                      {{item.project_price}}
                    </span>
                    <span class="icon1"
                          v-if="item.activity_status==3">起</span>
                  </div>
                </div>
                <div class="right clearfix"
                     v-if="item.insurance_is_set==2">
                  <img :src="imgUrl+'h5_images/mp_images/mp_3.1.1/bt/zmb.png'"
                       alt
                       class="img" />
                </div>
                <div class="right wei"
                     v-if="item.is_repair ==1">
                  <img :src="imgUrl+'h5_images/mp_images/mp_3.1.1/bt/wq.png'"
                       alt
                       class="img" />
                </div>
              </div>
            </div>
            <div class="action-btn"
                 @tap.stop="open_action(item)">
              <img :src="base_url+'/mp_2.9/action.png'"
                   v-if="base_url"
                   mode="widthFix"
                   alt
                   class="img" />
            </div>
            <!-- plus -->
            <p class="plus"
               v-if="item.plus_title&&item.plus_title!=''">
              <img src="https://img.ameimeika.com/h5_images/lifebeauty/plus_tag.png"
                   alt
                   class="tag" />
              {{item.plus_title}}
            </p>
            <p class="plus"
               v-if="item.activity_status==4 && item.deduction_credit > 0">
              <img src="https://img.ameimeika.com/h5_images/mp_images/mp_3.1.1/point.png"
                   alt
                   class="tag" />
              积分可抵{{item.deduction_credit}}元
            </p>
          </li>
        </ul>
        <!-- <div class="plus" v-if="item.plus_title&&item.plus_title!=''">{{item.plus_title}}</div> -->
      </li>
    </ul>
    <empty v-else></empty>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import empty from "@/components/footmark/empty";
export default {
  data () {
    return {
      base_url: common.image_resource,
      imgUrl: common.image_response
    };
  },
  methods: {
    project_detail (item) {
      wx.navigateTo({
        url: "/pages/package_projects/project_detail/main?id=" + item.id
      });
    },
    open_action (item) {
      this.$emit("show_action", item);
    }
  },
  components: {
    empty
  },
  created () {
    console.log(this.list);
  },
  props: ["list"],
  watch: {
    list (newVal) { }
  }
};
</script>

<style lang="less" scoped>
.container {
  .all-list {
    .list-item {
      .header {
        padding: 20px 0 4px 15px;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
      }
      .projects-list {
        .project-item {
          display: flex;
          flex-wrap: wrap;
          margin: 0 6px;
          margin-top: 6px;
          border-radius: 5px;
          height: auto;
          background-color: #fff;
          display: flex;
          padding-left: 10px;
          position: relative;
          .image {
            width: 114px;
            border-radius: 2px;
            margin-top: 12px;
            position: relative;
            margin-bottom: 12px;
            .img {
              width: 114px;
              height: 114px;
              display: block;
              border-radius: 4px;
              // position: absolute;
              // top: 0;
            }
            .buyingImg {
              width: 44px;
              height: 17px;
              line-height: 17px;
              background: linear-gradient(
                315deg,
                rgba(230, 27, 100, 1) 0%,
                rgba(255, 56, 62, 1) 100%
              );
              border-radius: 4px;
              position: absolute;
              z-index: 1;
              color: #fff;
              text-align: center;
              font-size: 10px;
              bottom: 6px;
              right: 6px;
            }
          }
          .content {
            flex: 1;
            min-height: 100px;
            padding-right: 15px;
            margin-left: 10px;
            margin-bottom: 12px;
            position: relative;
            .project-name {
              margin-top: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              font-size: 14px;
              font-family: "Regular";
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 20px;
              .bao,
              .wei {
                width: 16px;
                height: 16px;
                display: inline-block;
                font-size: 12px;
                text-align: center;
                border: 1px solid #fff;
                box-sizing: border-box;
                border-radius: 2px;
                margin-bottom: 6px;
                line-height: 14px;
              }
              .wei {
                color: #ff383e;
                border-color: #ff383e;
                &.wei1 {
                  margin-right: 4px;
                }
              }
              .bao {
                color: #0070ff;
                border-color: #0070ff;
                background: #fff;
              }
            }
            .hos-info {
              margin-top: 4px;
              .hos-name {
                width: 75%;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: #999999;
                line-height: 17px;
              }
              .distance {
                float: right;
                position: relative;
                .locate {
                  width: 14px;
                  height: 13px;
                  vertical-align: baseline;
                  position: absolute;
                  top: 10%;
                  left: -15px;
                }
              }
            }

            .user_point {
              //   position: absolute;
              //   bottom: 28px;
              display: block;
              font-size: 12px;
              color: #ff383e;
              .icon {
                font-size: 7px;
              }
            }
            .price {
              width: 100%;
              // padding-bottom: 10px;
              position: absolute;
              bottom: 0;
              height: 24px;
              line-height: 36px;
              display: inline-block;
              .old-price {
                vertical-align: bottom;
                .num {
                  font-size: 10px;
                  font-family: "Regular";
                  color: rgba(204, 204, 204, 1);
                  float: left;
                  position: relative;
                  &::before {
                    content: "";
                    width: 100%;
                    height: 1px;
                    background-color: rgba(204, 204, 204, 1);
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 1;
                  }
                }
              }
              .available_points {
                font-size: 12px;
                color: #ff383e;
                .coin {
                  font-size: 10px;
                }
                .num {
                  font-size: 16px;
                }
              }
              .bottom {
                display: inline-block;
                .left {
                  font-size: 12px;
                  float: left;
                  font-family: "Regular";
                  color: #ff383e;
                  .num {
                    font-size: 16px;
                    font-family: "Medium";
                    color: #ff383e;
                    .icon {
                      font-size: 12px;
                      margin-right: -5px;
                    }
                  }
                  .icon1 {
                    margin-left: -3.5px;
                    font-size: 9px;
                  }
                }
              }
              .right {
                margin-top: 11px;
                float: right;
                width: 31px;
                height: 13px;
                margin-right: 7px;
                .img {
                  width: 100%;
                  height: 100%;
                  display: block;
                }
              }
              .wei {
                width: 22px;
                height: 13px;
                .img {
                  width: 100%;
                  height: 100%;
                  display: block;
                }
              }
            }
          }
          .action-btn {
            position: absolute;
            right: 10px;
            bottom: 17px;
            .img {
              width: 20px;
              display: block;
            }
          }
          .plus {
            width: 100%;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            color: #666666;
            display: flex;
            position: relative;
            padding-left: 33px;
            margin-bottom: 8px;
            &:last-of-type {
              margin-bottom: 12px;
            }
            .tag {
              position: absolute;
              width: 29px;
              height: 16px;
              left: 0;
              top: 0;
            }
          }
        }
      }
    }
  }
}
</style>

